<template>
  <div>
    <div class="top_title">工单发生频度Top 5</div>
    <el-table :data="params" border stripe style="width: 100%">
      <el-table-column label="Top" width="50" align="center">
        <template #default="scope">
          <span v-show="scope.row.processCode">
            {{ scope.$index + 1 }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="工序"
        prop="processCode"
        min-width="90"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        label="设备"
        prop="equipName"
        min-width="90"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        label="项目描述"
        prop="projectName"
        min-width="100"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        label="产品型号"
        prop="productModel"
        align="center"
        min-width="90"
        show-overflow-tooltip
      />
      <el-table-column
        label="程序名"
        prop="programName"
        min-width="90"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        label="参数名称"
        prop="parameterDesc"
        min-width="100"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        label="工艺数据类别"
        prop="processDataType"
        min-width="110"
        show-overflow-tooltip
        align="center"
      >
        <template #default="scope">
          {{
            useDictionary("processDataType", scope.row.processDataType || "")
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="发生次数"
        prop="orderCount"
        min-width="80"
        align="right"
        show-overflow-tooltip
      />
      <el-table-column
        label="第一责任人"
        prop="responsiblePersonName"
        min-width="90"
        show-overflow-tooltip
        align="center"
      />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { useDictionary } from "@/utils/useTable";

const props = defineProps({
  type: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Array,
    default: () => {
      return [{}, {}, {}, {}, {}];
    },
  },
});
const { type, params } = toRefs(props);
const tableData = ref<any>([]);

watch(
  () => params.value,
  (newValue) => {
    const count = params.value?.length ?? 0;
    if (count >= 5) {
      tableData.value = newValue;
    } else {
      let list = newValue ?? [];
      const resultNum = 5 - list.length;
      for (let i = 0; i < resultNum; i++) {
        list.push({});
      }
      tableData.value = list;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.top_title {
  color: #444;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  margin: 20px 0 16px;
}
:deep(.el-table--border .el-table__cell) {
  height: 34px;
}
</style>
